把官方範例刪掉自己寫看看

import React, {useContext} from 'react'


const name = React.createContext();
const text = React.createContext();



function ThemedButton(props) {
  const name_t = useContext(name);
  const text_t = useContext(text);
  return (
    <button >
        {name_t} {text_t}
    </button>
  );
}

export default function App() {
  return (
      <name.Provider value={'react'}>
       <text.Provider value={'你好'}>
          <ThemedButton />
      </text.Provider>
      </name.Provider>
  );
}

在測試能不能把重複使用

import React, {useContext} from 'react'


const name = React.createContext();
const text = React.createContext();



function ThemedButton(props) {
  const name_t = useContext(name);
  const text_t = useContext(text);
  return (
    <button >
        {name_t} {text_t}
    </button>
  );
}

export default function App() {
  return (
      <name.Provider value={'react'}>
       <text.Provider value={'你好'}>
          <ThemedButton />
              <name.Provider value={'react2'}>
               <text.Provider value={'你好2'}>
                   <ThemedButton />
                        <name.Provider value={'react3'}>
                        <text.Provider value={'你好3'}>
                            <ThemedButton />
                        </text.Provider>
                        </name.Provider>
              </text.Provider>
              </name.Provider>
      </text.Provider>
      </name.Provider>
  );
}

這樣寫可以，可是寫一個專案下來這事情很大條，自己都看不下去。